<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录 - E-Spider AI</title>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link href="../styles.css" rel="stylesheet">
    <!-- 添加 Google OAuth 客户端库 -->
    <script src="https://accounts.google.com/gsi/client" async defer></script>
</head>
<body class="bg-gray-900 text-gray-100">
    <div class="min-h-screen flex items-center justify-center">
        <div class="max-w-md w-full mx-4">
            <!-- Logo -->
            <div class="text-center mb-8">
                <a href="../index.html">
                    <div class="h-16 w-16 mx-auto">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" class="w-full h-full">
                            <!-- 外圈蜘蛛网效果 -->
                            <circle cx="50" cy="50" r="45" fill="none" stroke="#4F46E5" stroke-width="2" />
                            <circle cx="50" cy="50" r="35" fill="none" stroke="#4F46E5" stroke-width="1.5" opacity="0.7" />
                            <circle cx="50" cy="50" r="25" fill="none" stroke="#4F46E5" stroke-width="1" opacity="0.5" />
                            
                            <!-- 放射状线条 -->
                            <line x1="50" y1="5" x2="50" y2="20" stroke="#4F46E5" stroke-width="1.5" />
                            <line x1="95" y1="50" x2="80" y2="50" stroke="#4F46E5" stroke-width="1.5" />
                            <line x1="50" y1="95" x2="50" y2="80" stroke="#4F46E5" stroke-width="1.5" />
                            <line x1="5" y1="50" x2="20" y2="50" stroke="#4F46E5" stroke-width="1.5" />
                            
                            <!-- E字母 -->
                            <path d="M40 35 L60 35 M40 35 L40 65 M40 50 L55 50 M40 65 L60 65" 
                                  stroke="#4F46E5" 
                                  stroke-width="4" 
                                  stroke-linecap="round"
                                  fill="none" />
                            
                            <!-- 小蜘蛛图案 -->
                            <circle cx="65" cy="40" r="3" fill="#4F46E5" />
                            <line x1="65" y1="37" x2="65" y2="33" stroke="#4F46E5" stroke-width="1" />
                            <line x1="62" y1="40" x2="58" y2="40" stroke="#4F46E5" stroke-width="1" />
                            <line x1="68" y1="40" x2="72" y2="40" stroke="#4F46E5" stroke-width="1" />
                        </svg>
                    </div>
                </a>
                <h2 class="mt-6 text-3xl font-bold">登录到 E-Spider AI</h2>
                <p class="mt-2 text-gray-400">选择您喜欢的方式登录</p>
            </div>

            <!-- 登录选项 -->
            <div class="bg-gray-800 shadow-lg rounded-lg p-8">
                <!-- 第三方登录按钮 -->
                <div class="space-y-4">
                    <!-- Google登录按钮容器 -->
                    <div id="g_id_onload"
                         data-client_id="79556742503-a9o1qejnspkhblud069v0odie2f3q7bj.apps.googleusercontent.com"
                         data-context="signin"
                         data-ux_mode="popup"
                         data-callback="handleGoogleSignIn"
                         data-auto_prompt="false">
                    </div>

                    <div class="g_id_signin"
                         data-type="standard"
                         data-shape="rectangular"
                         data-theme="filled_black"
                         data-text="signin_with"
                         data-size="large"
                         data-logo_alignment="left"
                         data-width="100%">
                    </div>

                    <button onclick="loginWithOutlook()" class="w-full flex items-center justify-center px-4 py-3 border border-gray-700 rounded-lg hover:bg-gray-700 transition duration-300">
                        <i class="fab fa-microsoft text-xl mr-3"></i>
                        <span>使用 Outlook 账号登录</span>
                    </button>
                </div>

                <!-- 分隔线 -->
                <div class="my-6 flex items-center">
                    <div class="flex-1 border-t border-gray-700"></div>
                    <div class="px-4 text-sm text-gray-400">或</div>
                    <div class="flex-1 border-t border-gray-700"></div>
                </div>

                <!-- 邮箱登录表单 -->
                <form onsubmit="loginWithEmail(event)">
                    <div class="mb-4">
                        <label class="block text-sm font-medium mb-2">电子邮箱</label>
                        <input type="email" id="emailInput" class="w-full px-4 py-3 bg-gray-700 border border-gray-600 rounded-lg focus:outline-none focus:border-blue-500" placeholder="name@company.com" required>
                    </div>
                    <button type="submit" class="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-4 rounded-lg transition duration-300">
                        继续
                    </button>
                </form>

                <!-- 服务条款 -->
                <p class="mt-6 text-center text-sm text-gray-400">
                    登录即表示您同意我们的
                    <a href="#" class="text-blue-400 hover:text-blue-300">服务条款</a>
                    和
                    <a href="#" class="text-blue-400 hover:text-blue-300">隐私政策</a>
                </p>
            </div>
        </div>
    </div>

    <script>
        function handleGoogleSignIn(response) {
            // 解码 JWT token 获取用户信息
            const jwt = response.credential;
            const base64Url = jwt.split('.')[1];
            const base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/');
            const jsonPayload = decodeURIComponent(atob(base64).split('').map(function(c) {
                return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
            }).join(''));

            const { email, name, picture } = JSON.parse(jsonPayload);
            
            // 存储用户信息
            localStorage.setItem('userEmail', email);
            localStorage.setItem('userName', name);
            localStorage.setItem('userPicture', picture);
            
            // 跳转到客户中心
            window.location.href = `customer.html?email=${encodeURIComponent(email)}`;
        }

        function loginWithOutlook() {
            // 实现 Outlook 登录
            window.location.href = 'customer.html?email=outlook@example.com';
        }

        function loginWithEmail(event) {
            event.preventDefault();
            const email = document.getElementById('emailInput').value;
            window.location.href = `customer.html?email=${encodeURIComponent(email)}`;
        }
    </script>
</body>
</html> 